<template>
  <view>
    <NavbarModule :title="$t('index.discover')" @showBubbleBox="showBubbleBox"/>
    <view class="box" @click="()=>bubbleBoxVisiable = false">
      <!-- <view class="cell-line">
				<view class="iconfont icon-shangchengxuanzhong cell-icon shop-icon"></view>
				<view class="cell-text">Shop</view>
				<view class="iconfont icon-jiantou-you arrow-icon"></view>
			</view> -->
      <view class="cell-line" @click="clickHandle(4)">
        <view class="iconfont icon-hezuo1 cell-icon dating-icon"></view>
        <view class="cell-text">{{$t('discover.Dating')}}</view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view>
      <view class="cell-line" @click="clickHandle(2)">
        <view
          class="iconfont icon-jifenguizeguankong cell-icon offer-icon"
        ></view>
        <view class="cell-text">{{$t('discover.Offer-a-reward')}}</view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view>
      <!-- <view class="cell-line">
				<view class="iconfont icon-xianzhi cell-icon transaction-icon"></view>
				<view class="cell-text">Transaction</view>
				<view class="iconfont icon-jiantou-you arrow-icon"></view>
			</view> -->
      <view class="cell-line" @click="clickHandle(3)">
        <view
          class="iconfont icon-gongwenbao cell-icon recruitment-icon"
        ></view>
        <view class="cell-text">{{$t('discover.Recruitment')}}</view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view>
    <!--  <view class="cell-line" @click="clickHandle(4)">
        <view class="iconfont icon-huodong cell-icon activity-icon"></view>
        <view class="cell-text">{{$t('discover.make-friends')}}</view>
        <view class="iconfont icon-jiantou-you arrow-icon"></view>
      </view> -->
      <!-- <view class="cell-line">
				<view class="iconfont icon-tuisong cell-icon leasing-icon"></view>
				<view class="cell-text">Leasing</view>
				<view class="iconfont icon-jiantou-you arrow-icon"></view>
			</view> -->
    </view>
    <BubbleBox v-if="bubbleBoxVisiable">
      <view class="menu-box">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="toPage(item,index)">
          {{ item.label }}
        </view>
      </view>
    </BubbleBox>
  </view>
</template>

<script>
import NavbarModule from "@/components/NavbarModule.vue";
import BubbleBox from '../../components/BubbleBox.vue';
export default {
  name: "Discover",
  components: {
    NavbarModule,
    BubbleBox,
  },
  data () {
    return {
      bubbleBoxVisiable: false, //气泡框
    }
  },
	computed: {
		menuList() {
			return [
        {
          label: this.$t('discover.Dating')
        },
        {
          label: this.$t('discover.Services-for-a-fee')
        },
        {
          label: this.$t('discover.Jobs')
        }
      ]
		}
	},
  methods: {
    clickHandle(val) {
      switch (val) {
        case 1:
          break;
        case 2:
          uni.navigateTo({
            url: "/pagesDiscover/reward/Reward",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "/pagesDiscover/recruitment/Recruitment",
          });
          break;
        case 4:
          uni.switchTab({
            url: "/pages/makefriends/MakeFriends",
          });
          break;
        default:
          break;
      }
    },
    onShow(){
       this.bubbleBoxVisiable = false;
    },
    // 气泡框显隐
    showBubbleBox () {
      this.bubbleBoxVisiable = !this.bubbleBoxVisiable
    },
    toPage (item,index) {
      if (index == 0) {
        console.log('dating')
      }
      if (index == 1) {
        console.log('Services for a fee')
      }
      if (index == 3) {
        console.log('Jobs')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
	height: calc(100vh - 44px - var(--status-bar-height));
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
	
  &.box > view:nth-last-child(1) {
    border-bottom: none;
  }

  .cell-line {
		background-color: #FFFFFF;
    width: 100%;
    height: 120upx;
		padding: 0 30upx;
    display: flex;
    align-items: center;
    border-bottom: 2upx solid #f6f6f6;

    .cell-icon {
      width: 68upx;
      height: 68upx;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
      line-height: 68upx;

      &.shop-icon {
        background: #795edd;
        font-size: 32upx;
      }

      &.dating-icon {
        background: #be75c1;
        font-size: 36upx;
      }

      &.offer-icon {
        background: #6ab2e5;
        font-size: 32upx;
      }

      &.transaction-icon {
        background: #69da94;
        font-size: 48upx;
      }

      &.recruitment-icon {
        background: #f5a527;
        font-size: 34upx;
      }

      &.activity-icon {
        background: #f1513c;
        font-size: 34upx;
      }

      &.leasing-icon {
        background: #68d5bf;
        font-size: 48upx;
      }
    }

    .cell-text {
      flex: 1;
      margin-left: 30upx;
      font-size: 30upx;
      font-weight: 400;
      color: #000000;
    }

    .arrow-icon {
      color: #a6a6a6;
      font-size: 30upx;
    }
  }
}
.menu-box{
  padding: 0 30rpx;
  .menu-item{
    height: 80rpx;
    background: #0D1918;
    box-shadow: inset 0px -2rpx 0px 0px rgba(255,255,255,0.05);
    line-height: 80rpx;
    font-size: 28rpx;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 80rpx;
  }
}

</style>
